<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>富扬数据看板</title>
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <link rel="stylesheet" href="/stylesheets/css/bootstrap.min.css">
  <link rel="stylesheet" href="/stylesheets/css/select2.min.css">
  <link rel="stylesheet" href="/stylesheets/css/AdminLTE.min.css">
  <link rel="stylesheet" href="/stylesheets/skins/_all-skins.min.css">
  <style>
    .row b{
      color: red;
    }
    .content-header>h1>.breadcrumb {
      background: transparent;
      margin-top: 0;
      margin-bottom: 0;
      font-size: 12px;
      padding: 7px 5px;
      border-radius: 2px;
      display: inline-block;
    }
    .oid_hide{
      position: absolute;
      visibility: hidden;
      height: 0; width: 0;
      overflow: hidden;
    }
  </style>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

  <%- include("./public/header.ejs") %>

  <%- include("./public/aside.ejs") %>

  <div class="content-wrapper">
    <section class="content-header">
      <h1>
        <span class="bt_title">添加订单</span>
        <ol class="breadcrumb">
          <li><a href="/"><i class="glyphicon glyphicon-dashboard"></i>首页</a></li>
          <li><a href="/order">订单管理</a></li>
          <li class="active"><span class="bt_title">添加订单</span></li>
        </ol>
      </h1>
    </section>
    <section class="content">
      <div class="row">
        <div class="col-md-12">
          <div class="box box-primary">
            <div class="box-header with-border">
              <h3 class="box-title">请输入订单信息 <small><b>注：* 号为必填项</b></small> </h3>
            </div>
            <form role="form" method="post" class="form">
              <div class="box-body">
                <div class="col-sm-6">
                  <div class="form-group col-sm-12 oid_hide">
                    <label for="oId" class="col-sm-3 control-label">订单号：</label>
                    <div class="col-sm-8">
                      <input type="text" class="form-control" id="oId" placeholder="oId" name="oId" required autocomplete="off">
                    </div>
                  </div>
                  <div class="form-group col-sm-12">
                    <label for="OrderDate" class="col-sm-3 control-label">订单日期：<b>*</b></label>
                    <div class="col-sm-8">
                      <input type="date" class="form-control" id="OrderDate" placeholder="OrderDate" name="OrderDate" required autocomplete="off">
                    </div>
                  </div>
                  <div class="form-group col-sm-12">
                    <label for="CustomerName" class="col-sm-3 control-label">客户名称：<b>*</b></label>
                    <div class="col-sm-8">
                      <select class="form-control select2" style="width: 100%;" id="CustomerName" name="CustomerName" required autocomplete="off"></select>
                    </div>
                  </div>
                  <div class="form-group col-sm-12">
                    <label for="ShipName" class="col-sm-3 control-label">船名：</label>
                    <div class="col-sm-8">
                      <input type="text" class="form-control" id="ShipName" placeholder="ShipName" name="ShipName" autocomplete="off">
                    </div>
                  </div>
                  <div class="form-group col-sm-12">
                    <label for="ShipPort" class="col-sm-3 control-label">港口：</label>
                    <div class="col-sm-8">
                      <input type="text" class="form-control" id="ShipPort" placeholder="ShipPort" name="ShipPort" autocomplete="off">
                    </div>
                  </div>
                  <div class="form-group col-sm-12">
                    <label for="AccountingNo" class="col-sm-3 control-label">核算号：<b>*</b></label>
                    <div class="col-sm-8">
                      <input type="text" class="form-control" id="AccountingNo" placeholder="AccountingNo" name="AccountingNo" required autocomplete="off">
                    </div>
                  </div>
                  <div class="form-group col-sm-12">
                    <label for="OrderClerk" class="col-sm-3 control-label">订单员：<b>*</b></label>
                    <div class="col-sm-8">
                      <input type="text" class="form-control" id="OrderClerk" placeholder="OrderClerk" name="OrderClerk" readonly>
                    </div>
                  </div>
                </div>
                <div class="col-sm-6">
                  <div class="form-group col-sm-12">
                    <label for="Currency" class="col-sm-4 control-label">币种：<b>*</b></label>
                    <div class="col-sm-8">
                      <select class="form-control select2" style="width: 100%;" id="Currency" placeholder="Currency" name="Currency" required autocomplete="off"></select>
                    </div>
                  </div>
                  <div class="form-group col-sm-12">
                    <label for="OriginalCurrencyAmount" class="col-sm-4 control-label">订单原币金额：<b>*</b></label>
                    <div class="col-sm-8">
                      <input type="text" class="form-control" id="OriginalCurrencyAmount" placeholder="OriginalCurrencyAmount" name="OriginalCurrencyAmount" required autocomplete="off">
                    </div>
                  </div>
                  <div class="form-group col-sm-12">
                    <label for="OriginalCurrencyAmountAfterDiscount" class="col-sm-4 control-label">原币折扣后金额：<b>*</b></label>
                    <div class="col-sm-8">
                      <input type="text" class="form-control" id="OriginalCurrencyAmountAfterDiscount" placeholder="OriginalCurrencyAmountAfterDiscount" name="OriginalCurrencyAmountAfterDiscount" required autocomplete="off">
                    </div>
                  </div>
                </div>
              </div>
              <div class="box-footer">
                <button type="submit" class="btn btn-primary">提交</button>
                <a class="btn btn-default" href="/order">关闭</a>
              </div>
            </form>
          </div>
        </div>
      </div>
    </section>
  </div>

  <%- include("./public/footer.ejs") %>
</div>

<script src="/javascripts/jquery.min.js"></script>
<script src="/javascripts/bootstrap.min.js"></script>
<script src="/javascripts/select2.full.min.js"></script>
<script src="/javascripts/adminlte.min.js"></script>
<script>

  const exchangeRateData = <%- JSON.stringify(exchangeRateData) %>;
  const customerData = <%- JSON.stringify(customerData) %>;
  const orderData = <%- JSON.stringify(orderData) %>;
  const employeesName = <%- JSON.stringify(employeesName) %>;

  const orderInfo = {};
  location.search && location.search.slice(1).split("&").forEach(val=>{
    orderInfo[val.split("=")[0]] = val.split("=")[1];
  });

  const nowOrder = orderData.find( v=>v.oId === orderInfo.oId );
  console.log(nowOrder);

  if(orderInfo.oId){
    $(".bt_title").html('修改订单');
    $("#oId").removeAttr("disabled").attr("readonly","readonly").val(nowOrder.oId);
    $("#OrderDate").attr("readonly", "readonly");
    $("#AccountingNo").val(nowOrder.AccountingNo);
    $("#ShipName").val(nowOrder.ShipName);
    $("#ShipPort").val(nowOrder.ShipPort);
    $("#OriginalCurrencyAmount").val(nowOrder.OriginalCurrencyAmount);
    $("#OriginalCurrencyAmountAfterDiscount").val(nowOrder.OriginalCurrencyAmountAfterDiscount);
    $("#OrderClerk").val( nowOrder.OrderClerk );
    $(".form").attr("action", "/order/set");
  }else{
    $(".bt_title").html('添加订单');
    $("#oId").attr("disabled","disabled");
    $("#OrderClerk").val( employeesName );
    $(".form").attr("action", "/order/add/handle");
  }

  const erd = exchangeRateData.map(val=>({
    id: val.eId,
    text: val.currency + " / " + val.exchangeRate
  }))
  $('#Currency').select2({
    minimumResultsForSearch: -1,
    data: erd
  }).val(nowOrder?.Currency || erd[0].id).trigger("change");
  
  $('#CustomerName').select2({
    placeholder: 'CustomerName',
    allowClear: true,
    tags: true,
    data: [{
      id: '', text: ''
    }, ...customerData.map(val=>({
      id: val.cId,
      text: val.cName
    }))]
  }).val(nowOrder?.CustomerName || "").trigger("change").on("change", function(){
    if(!customerData.find(v=>v.cId===$(this).val())){
      $.ajax({
        url: '/customer/add',
        type: 'post',
        data: {
          cName: $(this).val()
        }
      }).then(res=>{
      })
    }
  })

  const d = new Date();
  $("#OrderDate").val( d.getFullYear() + "-" + cz(d.getMonth()+1) + "-" + cz(d.getDate()) );
  function cz(n){
    return n.toString().length<2 ? '0'+n : n;
  }
</script>
</body>
</html>
